<!-- 宣传引导明细页面 -->
<template>
  <div class="page">
    <div class="page__bd">
      <article class="weui-article">
        <h1 v-text="item.title"></h1>
        <div class="weui-c-meta">
          <span class="weui-c-nickname">发布时间:</span>
          <em class="weui-c-nickname" v-text="substr(item.publicTime)"></em>
        </div>
        <section v-html="item.detailInfo"></section>
      </article>
    </div>
    <div class="weui-form">
      <div class="weui-form__control-area">
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_radio">
            <label class="weui-cell weui-cell_active weui-check__label" :for="obj.id"
                   v-for="(obj, index) in item.optionsDto">
              <div class="weui-cell__bd">
                <p>{{obj.title}}({{obj.voteNum}})</p>
              </div>
              <div class="weui-cell__ft">
                <input type="radio" name="optionId" class="weui-check" :id="obj.id" :value="obj.id"/>
                <span class="weui-icon-checked"></span>
              </div>
            </label>
          </div>
        </div>
      </div>
      <div class="weui-form__opr-area">
        <a class="weui-btn weui-btn_primary" href="javascript:" @click="submit()" id="showTooltips">投票</a>
      </div>
    </div>

    <!--BEGIN toast-->
    <div id="toast" style="display: none;">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-icon-success-no-circle weui-icon_toast"></i>
        <p class="weui-toast__content">投票成功</p>
      </div>
    </div>
    <div id="infoToast" style="display: none;">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-icon-warn weui-icon_toast"></i>
        <p class="weui-toast__content" id="weui-toast__content"></p>
      </div>
    </div>
    <!--end toast-->
  </div>
</template>
<script type="text/javascript">
  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import {axiosContentType, apiPath} from '@/assets/js/boss'
  import 'weui'

  export default {
    data() {
      return {
        item: {},
        openId: null
      }
    },
    mounted() {
      let that = this;
      let id = this.$route.query.id;
      axios.get(apiPath + '/api/sys/sysNews/publicityInfo/' + id
        , null
        , axiosContentType.xWwwFormUrlencoded
      ).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.item = result.data;
        } else {
          that.showMsg(result.message);
        }
      });
      that.getOpenId();
    },
    methods: {
      substr(text) {
        if (text === null) {
          return text;
        }
        return ('' + text).substring(0, 16);
      },
      getOpenId() {
        let that = this;
        let code = this.$route.query.code;
        if (code === null || code === '' || code === 'null') {
          $('#showTooltips').addClass('weui-btn_disabled'); // 未获取到微信授权code,不允许投票
          return;
        }
        axios.get(apiPath + '/api/wechat/getOpenIdByCode?code=' + code
          , null
          , axiosContentType.xWwwFormUrlencoded
        ).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.openId = result.data;
            if (that.openId === null || that.openId === '' || that.openId === 'null') {
              $('#showTooltips').addClass('weui-btn_disabled');
            }
          } else {
            $('#showTooltips').addClass('weui-btn_disabled');
            // that.showMsg(result.message);
          }
        });
      },
      submit() {
        let that = this;
        let optionId = $('input[name=optionId]:checked').val();
        if (optionId && optionId !== '' && that.openId !== null) {
          $('#showTooltips').addClass('weui-btn_disabled');
          let url = apiPath + '/api/sys/sysNews/publicityVote?newsId=' + that.item.id + '&optionsId=' + optionId + '&openId=' + that.openId;
          axios.post(url, null,
            axiosContentType.xWwwFormUrlencoded).then(function (response) {
            const result = response.data;
            // console.info("获取数据.." + JSON.stringify(result));
            if (result.code === 0) {
              that.showSuccess();
              for (let i in that.item.optionsDto) {
                let option = that.item.optionsDto[i];
                if (option.id === optionId) {
                  that.item.optionsDto[i].voteNum = that.item.optionsDto[i].voteNum + 1;
                }
              }
            } else {
              $('#showTooltips').removeClass('weui-btn_disabled');
              that.showMsg(result.message);
            }
          });
        } else {
          that.showMsg('请选择您要投票的选项');
        }
      },
      showMsg(msg) {
        let $toast = $('#infoToast');
        if ($toast.css('display') !== 'none') return;
        $('#weui-toast__content').empty().append(msg);
        $toast.fadeIn(100);
        setTimeout(function () {
          $toast.fadeOut(100);
        }, 2000);
      },
      showSuccess() {
        let $toast = $('#toast');
        if ($toast.css('display') !== 'none') return;
        $toast.fadeIn(100);
        setTimeout(function () {
          $toast.fadeOut(100);
        }, 2000);
      }
    }
  }
</script>
